
import { Col, Row,Spin, Button, Input, Checkbox, Table, Tag, Pagination, Tooltip, Skeleton, Card, message, Image, Modal, Radio } from 'antd';
import { useEffect, useState } from 'react';
import { GetGoodsOrderDetails, GetHotGoods, GetOrderDetails, GetOrders, GetStatistics, GetSupplierOrderDetails, GetSupplierSales } from '../../api/home';
import "../../css/homeIndex.css"
import { getWidth } from "../../utils/getWidth";
import dayjs from 'dayjs';
import CountUp from "react-countup";
import * as echarts from "echarts";
import { LoadingOutlined } from '@ant-design/icons';

// const HomeIndex = () => {
//     document.info = [
//         {
//             title: "首页",
//             url: "/",
//         }
//       ]
//     //统计数据(卡片使用)
//     // const [statisticsData, getStatistics] = useState({});


//     const [cardWidth, setCard] = useState(6); //卡片大小弹性设置
//     const [cardData, setCardData] = useState([]);//卡片大小弹性设置
//     const [windowWidth, setWindowWidth] = useState(getWidth());   //实时获取页面宽度
//     const [hootGoodTable, setHootGoodTable] = useState([]); //热销商品数据
//     const [supplierTable, setSupplierTable] = useState([]);    //获取供应商销售数据
//     const [ordersTable, setOrdersTable] = useState([]);    //获取销售数据
//     const [orderSonTable, setOrderSonTable] = useState([]); //获取销售数据详情
//     const [hootGoodSonTable, sethootGoodSonTable] = useState([]); //获取热销商品的详情的数据
//     const [supplierSonTable, setSupplierSonTable] = useState([]); //获取供应商的详情的数据


//     //热销商品数据分页
//     const [hootGoodPages, setHootGoodPage] = useState({
//         page: 1,
//         limit: 10,
//         total: 0
//     });

//     //供应商商品数据分页
//     const [supplierPages, setSupplierPage] = useState({
//         page: 1,
//         limit: 10,
//         total: 0
//     });

//     //订单列表数据分页
//     const [orderPages, setOrderPage] = useState({
//         page: 1,
//         limit: 10,
//         total: 0
//     });

//     //畅销商品详情分页
//     const [goodDetailPages, setgoodDetailPage] = useState({
//         page: 1,
//         limit: 10,
//         total: 0
//     });

//     //供应商数据详情分页
//     const [supplierDetailPages, setsupplierDetailPage] = useState({
//         page: 1,
//         limit: 10,
//         total: 0
//     });

//     //订单条件查询
//     const [likeSelect, setlike] = useState({
//         begin:dayjs(new Date()).format("YYYY-MM-DD"),
//         end: dayjs(new Date().getTime() + 1 * 24 * 60 * 60 * 1000).format("YYYY-MM-DD")
//     });

//     //加载效果
//     const [load, setLoad] = useState({
//         loading: false,
//         isFirst: true,
//         sonLoading: false,
//         sonFirst: true
//     });

//     //销售数据模态框
//     const [open_a, setOpen_a] = useState(false);
//     const [open_b, setOpen_b] = useState(false);
//     const [open_c, setOpen_c] = useState(false);



//     //复选框 start
//     const onChange = (checkedValues) => {
//         const arr=options;
//         //设置只有一个能选中
//         arr.forEach((d, i) => {
//             console.log(checkedValues[0] !== d.value);
//             if (checkedValues[0] !== d.value) {
//                 arr[i].disabled = true;
//             }
//             if (checkedValues.length === 0) {
//                 arr[i].disabled = false;
//             }
//         });

//         setOptions(arr);

//         switch (checkedValues[0]) {
//             case "a":
//                 const begin_today = dayjs(new Date()).format("YYYY-MM-DD");
//                 const end_today = dayjs(new Date().getTime() + 1 * 24 * 60 * 60 * 1000).format("YYYY-MM-DD");
//                 setlike((likeSelect) => ({ ...likeSelect, begin: begin_today, end: end_today }));
//                 return
//             case "b":
//                 const begin_week = dayjs(new Date(likeSelect.end).getTime() - 7 * 24 * 60 * 60 * 1000).format("YYYY-MM-DD");
//                 setlike((likeSelect) => ({ ...likeSelect, begin: begin_week }));
//                 return
//             case "c":
//                 const begin_month = dayjs(new Date(likeSelect.end).getTime() - 30 * 24 * 60 * 60 * 1000).format("YYYY-MM-DD");
//                 setlike((likeSelect) => ({ ...likeSelect, begin: begin_month }));
//                 return
//             case "d":
//                 const begin_lmonth = dayjs(new Date(likeSelect.end).getTime() - 6 * 30 * 24 * 60 * 60 * 1000).format("YYYY-MM-DD");
//                 setlike((likeSelect) => ({ ...likeSelect, begin: begin_lmonth }));
//                 return
//             case "e":
//                 const begin_smonth = dayjs(new Date(likeSelect.end).getTime() - 12 * 30 * 24 * 60 * 60 * 1000).format("YYYY-MM-DD");
//                 setlike((likeSelect) => ({ ...likeSelect, begin: begin_smonth }));
//                 return
//             case "f":
//                 setlike((likeSelect) => ({ ...likeSelect, begin: "1750-05-18" }));
//                 return
//             default:
//                 const begin_default = dayjs(new Date()).format("YYYY-MM-DD");
//                 const end_default = dayjs(new Date().getTime() + 1 * 24 * 60 * 60 * 1000).format("YYYY-MM-DD");
//                 setlike((likeSelect) => ({ ...likeSelect, begin: begin_default, end: end_default }));
//                 return
//         }


//     };

//     // const plainOptions = ['Appl111e', 'Pear', 'Orange'];

//     const [options,setOptions] = useState([
//         {
//             label: '今日',
//             value: "a",
//             disabled: false
//         },
//         {
//             label: '7日内',
//             value: "b",
//             disabled: false
//         },
//         {
//             label: '30日内',
//             value: 'c',
//             disabled: false
//         },
//         {
//             label: '6个月内',
//             value: 'd',
//             disabled: false
//         },
//         {
//             label: '1年内',
//             value: 'e',
//             disabled: false
//         },
//         {
//             label: '不限制',
//             value: 'f',
//             disabled: false
//         }
//     ])
//     //复选框 end


//     //表格表头   销售数据
//     const columns_orders = [
//         {
//             title: '订单号',
//             dataIndex: 'id',
//             key: 'id',
//             ellipsis: {
//                 showTitle: false,
//             },
//             with: 20,
//             render: (text) => <Tooltip placement="topLeft" title={text}>{text}</Tooltip>,

//         },
//         {
//             title: '商户',
//             dataIndex: 'merchant',
//             key: 'merchant',
//             // with:50,
//             ellipsis: {
//                 showTitle: false,
//             },
//             render: (text) => <Tooltip placement="topLeft" title={text}>{text}</Tooltip>

//         },
//         {
//             title: '商品种类',
//             dataIndex: 'goodsCategory',
//             key: 'goodsCategory',
//             // width: 80,
//             render: (text) => <Tag color='blue' bordered={false} className='primary-tag'>{text}</Tag>
//         },

//         {
//             title: '商品数量',
//             dataIndex: 'goodsCount',
//             key: 'goodsCount',
//             // width: 80,
//             render: (text) => <Tag color='blue' bordered={false} className='primary-tag'>{text}</Tag>
//         },
//         {
//             title: '总金额',
//             dataIndex: 'money',
//             key: 'money',
//             render: (text) => <Tag color='red' bordered={false} className='danger-tag'>￥ {text}</Tag>
//         },
//         {
//             title: '供应商',
//             dataIndex: 'suppliers',
//             key: 'suppliers',
//             ellipsis: {
//                 showTitle: false,
//             },
//             render: (text) => (
//                 <Tooltip placement="topLeft" title={text}>
//                     <Tag color='blue' bordered={false} className='primary-tag'>{text}</Tag>
//                 </Tooltip>
//             )
//         },
//         {
//             title: '状态',
//             dataIndex: 'isCancel',
//             key: 'isCancel',
//             render: (text, hang) => (
//                 <div>
//                     {text == 0 && hang.isComplete == 0 && <Tag color='warning' bordered={false} className='warning-tag'>未完成</Tag>}
//                     {text == 1 && <Tag color='blue' bordered={false} className='primary-tag'>已取消</Tag>}
//                     {text == 0 && hang.isComplete == 1 && <Tag color='success' bordered={false} className='success-tag'>已完成</Tag>}
//                 </div>
//             )
//         },
//         {
//             title: '发货数量',
//             dataIndex: 'sendCount',
//             key: 'sendCount',
//             render: (text) => <Tag color='blue' bordered={false} className='primary-tag'>{text}</Tag>

//         },
//         {
//             title: '收货数量',
//             dataIndex: 'receiveCount',
//             key: 'receiveCount',
//             render: (text) => <Tag color='blue' bordered={false} className='primary-tag'>{text}</Tag>
//         },
//         {
//             title: '收货金额',
//             dataIndex: 'receiveMoney',
//             key: 'receiveMoney',
//             ellipsis: {
//                 showTitle: false,
//             },
//             //   with:100,
//             render: (text) => <Tooltip placement="topLeft" title={text}><Tag color='red' bordered={false} className='danger-tag'>￥ {text}</Tag></Tooltip>

//         },
//         {
//             title: '时间',
//             dataIndex: 'time',
//             key: 'time',
//             // with:50,
//             ellipsis: {
//                 showTitle: false,
//             },
//             render: (text) => <Tooltip placement="topLeft" title={text}>{text}</Tooltip>
//         },
//         {
//             title: '操作',
//             dataIndex: '',
//             key: '',
//             width: 185,
//             fixed: "right",
//             render: (text, hang) => (
//                 <div style={{ width: 185 }}>
//                     <div style={{ marginLeft: "5px" }} className="primary btn" size="small" onClick={() => ordersDetail(hang.id)}>详情</div>
//                 </div>
//             ),
//         },

//     ];


//     // 销售数据详情
//     const columns_orderSon = [
//         {
//             title: '序号',
//             dataIndex: 'Index',
//             key: 'Index',
//             with: 20

//         },
//         {
//             title: '详情号',
//             dataIndex: 'id',
//             key: 'id',
//             ellipsis: {
//                 showTitle: false,
//             },
//             with: 100,
//             render: (text) => <Tooltip placement="topLeft" title={text}>{text}</Tooltip>,

//         },
//         {
//             title: '图片',
//             dataIndex: 'photo',
//             key: 'photo',
//             render: (text) => <img style={{ width: 60, borderRadius: 5 }} src={text}></img>

//         },
//         {
//             title: '商品名称',
//             dataIndex: 'goodsName',
//             key: 'goodsName'
//         },

//         {
//             title: '供应商',
//             dataIndex: 'merchant',
//             key: 'merchant',
//             ellipsis: {
//                 showTitle: false,
//             },
//             width: 120,
//             render: (text) => (
//                 <Tooltip placement="topLeft" title={text}>
//                     <Tag color='blue' bordered={false} className='primary-tag'>{text}</Tag>
//                 </Tooltip>
//             )
//         },
//         {
//             title: '单价',
//             dataIndex: 'price',
//             key: 'price',
//             ellipsis: {
//                 showTitle: false,
//             },
//             width: 120,
//             render: (text) => <Tooltip placement="topLeft" title={text}>
//                 <Tag color='red' bordered={false} className='danger-tag'>￥ {text}</Tag>
//             </Tooltip>
//         },
//         {
//             title: '数量',
//             dataIndex: 'number',
//             key: 'number'
//         },

//         {
//             title: '小计',
//             dataIndex: 'money',
//             key: 'money',
//             ellipsis: {
//                 showTitle: false,
//             },
//             width: 120,
//             render: (text) => <Tooltip placement="topLeft" title={text}>
//                 <Tag color='red' bordered={false} className='danger-tag'>￥ {text}</Tag>
//             </Tooltip>
//         },

//         {
//             title: '发货',
//             dataIndex: 'isSend',
//             key: 'isSend',
//             render: (text) => (
//                 <div>
//                     {text == 0 && <Tag color='warning' bordered={false} className='warning-tag'>否</Tag>}
//                     {text == 1 && <Tag color='success' bordered={false} className='success-tag'>是</Tag>}
//                 </div>
//             )
//         },

//         {
//             title: '收货',
//             dataIndex: 'isReceive',
//             key: 'isReceive',
//             render: (text) => (
//                 <div>
//                     {text === 0 && <Tag color='warning' bordered={false} className='warning-tag'>否</Tag>}
//                     {text === 1 && <Tag color='success' bordered={false} className='success-tag'>是</Tag>}
//                 </div>
//             )
//         },

//         {
//             title: '发货时间',
//             dataIndex: 'sendTime',
//             key: 'sendTime',
//             with: 120,
//             ellipsis: {
//                 showTitle: false,
//             },
//             render: (text) => {
//                 if (text !== "" && text !== null) {
//                     return <Tooltip placement="topLeft" title={text}>{text}</Tooltip>
//                 } else {
//                     return <div>-</div>
//                 }
//             }
//         },

//         {
//             title: '收货时间',
//             dataIndex: 'receiveTime',
//             key: 'receiveTime',
//             with: 100,
//             ellipsis: {
//                 showTitle: false,
//             },
//             render: (text) => {
//                 // {text!=="" && text!==null &&<Tooltip placement="topLeft" title={text}>{text}</Tooltip>}
//                 // {text==="" || text===null&& "-"}
//                 if (text !== "" && text !== null) {
//                     return <Tooltip placement="topLeft" title={text}>{text}</Tooltip>
//                 } else {
//                     return <div>-</div>
//                 }
//             }
//         },

//         {
//             title: '状态',
//             dataIndex: 'isCancel',
//             key: 'isCancel',
//             render: (text, hang) => (
//                 <div>
//                     {text === 0 && hang.isSend === 0 && <Tag color='warning' bordered={false} className='warning-tag'>未完成</Tag>}
//                     {hang.isCancel == 1 && hang.isComplete == 0 && hang.isSend == 0 && <Tag color='info' bordered={false} className='info-tag'>已取消</Tag>}
//                     {text === 0 && hang.isComplete === 1 && hang.isReceive === 1 && <Tag color='success' bordered={false} className='success-tag'>已完成</Tag>}
//                 </div>
//             )
//         },


//         {
//             title: '操作',
//             dataIndex: '',
//             key: '',
//             render: (text, hang) => (
//                 <div>
//                     -
//                 </div>
//             ),
//         },

//     ];



//     //热销商品数据
//     const columns_hootGoods = [
//         {
//             title: '序号',
//             dataIndex: 'Index',
//             key: 'Index'

//         },
//         {
//             title: '图片',
//             dataIndex: 'photo',
//             key: 'photo',
//             render: (text) => <Image width={60} src={text}></Image>

//         },
//         {
//             title: '规格',
//             dataIndex: 'specs',
//             key: 'specs'
//         },

//         {
//             title: '销量',
//             dataIndex: 'sales',
//             key: 'sales',
//             render: (text) => <Tag color='blue' bordered={false} className='primary-tag'>{text}</Tag>
//         },
//         {
//             title: '金额',
//             dataIndex: 'money',
//             key: 'money',
//             ellipsis: {
//                 showTitle: false,
//             },
//             width: 100,
//             render: (text) => <Tooltip placement="topLeft" title={text}>
//                 <Tag color='red' bordered={false} className='danger-tag'>￥ {text}</Tag> </Tooltip>
//         },
//         {
//             title: '类型',
//             dataIndex: 'type',
//             key: 'type',
//         },
//         {
//             title: '最新下单时间',
//             dataIndex: 'lastTime',
//             key: 'lastTime',
//             ellipsis: {
//                 showTitle: false,
//             },
//             render: (text) => <Tooltip placement="topLeft" title={text}>
//                 {text}
//             </Tooltip>,
//             width: 100

//         },
//         {
//             title: '操作',
//             dataIndex: '',
//             key: '',
//             width: 185,
//             fixed: "right",
//             render: (text, hang) => <div style={{ marginLeft: "5px" }} className="primary btn" size="small" onClick={() => { hootGoodDetail(hang.id) }}>详情</div>




//         },

//     ];

//     //热销商品数据 详情
//     const columns_goodSon = [
//         {
//             title: '序号',
//             dataIndex: 'Index',
//             key: 'Index',
//             with: 20

//         },
//         {
//             title: '详情号',
//             dataIndex: 'id',
//             key: 'id',
//             ellipsis: {
//                 showTitle: false,
//             },
//             with: 80,
//             render: (text) => (<Tooltip placement="topLeft" title={text}>{text}</Tooltip>),

//         },

//         {
//             title: '供应商',
//             dataIndex: 'merchant',
//             key: 'merchant',
//             ellipsis: {
//                 showTitle: false,
//             },
//             width: 130,
//             render: (text) => (
//                 <Tooltip placement="topLeft" title={text}>
//                     <Tag color='blue' bordered={false} className='primary-tag'>{text}</Tag>
//                 </Tooltip>
//             )
//         },
//         {
//             title: '商户',
//             dataIndex: 'merchant',
//             key: 'merchant',
//             ellipsis: {
//                 showTitle: false,
//             },
//             width: 100,
//             render: (text) => <Tooltip placement="topLeft" title={text}>{text}</Tooltip>

//         },
//         {
//             title: '商品',
//             dataIndex: 'name',
//             key: 'name',
//             ellipsis: {
//                 showTitle: false,
//             },
//             width: 100,
//             render: (text) => <Tooltip placement="topLeft" title={text}>{text}</Tooltip>
//         },
//         {
//             title: '数量',
//             dataIndex: 'number',
//             key: 'number'
//         },

//         {
//             title: '单价',
//             dataIndex: 'price',
//             key: 'price',
//             ellipsis: {
//                 showTitle: false,
//             },
//             width: 90,
//             render: (text) => <Tooltip placement="topLeft" title={text}>
//                 <Tag color='red' bordered={false} className='danger-tag'>￥ {text}</Tag>
//             </Tooltip>
//         },


//         {
//             title: '总价',
//             dataIndex: 'money',
//             key: 'money',
//             ellipsis: {
//                 showTitle: false,
//             },
//             width: 90,
//             render: (text) => <Tooltip placement="topLeft" title={text}>
//                 <Tag color='red' bordered={false} className='danger-tag'>￥ {text}</Tag>
//             </Tooltip>
//         },
//         {
//             title: '时间',
//             dataIndex: 'time',
//             key: 'time',
//             ellipsis: {
//                 showTitle: false,
//             },
//             width: 100,
//             render: (text) => <Tooltip placement="topLeft" title={text}>
//                 {text}
//             </Tooltip>
//         },
//         {
//             title: '发货',
//             dataIndex: 'isSend',
//             key: 'isSend',
//             width: 60,
//             render: (text) => (
//                 <div>
//                     {text == 0 && <Tag color='warning' bordered={false} className='warning-tag'>否</Tag>}
//                     {text == 1 && <Tag color='success' bordered={false} className='success-tag'>是</Tag>}
//                 </div>
//             )
//         },

//         {
//             title: '收货',
//             dataIndex: 'isReceive',
//             key: 'isReceive',
//             width: 60,
//             render: (text) => (
//                 <div>
//                     {text === 0 && <Tag color='warning' bordered={false} className='warning-tag'>否</Tag>}
//                     {text === 1 && <Tag color='success' bordered={false} className='success-tag'>是</Tag>}
//                 </div>
//             )
//         },
//         {
//             title: '收货数量',
//             dataIndex: 'receiveNumber',
//             key: 'receiveNumber'
//         },
//         {
//             title: '收货金额',
//             dataIndex: 'receiveMoney',
//             key: 'receiveMoney',
//             ellipsis: {
//                 showTitle: false,
//             },
//             width: 90,
//             render: (text) => <Tooltip placement="topLeft" title={text}>
//                 <Tag color='red' bordered={false} className='danger-tag'>￥ {text}</Tag>
//             </Tooltip>
//         },
//         {
//             title: '完成',
//             dataIndex: 'isComplete',
//             key: 'isComplete',
//             width: 60,
//             render: (text) => (
//                 <div>
//                     {text === 0 && <Tag color='warning' bordered={false} className='warning-tag'>否</Tag>}
//                     {text === 1 && <Tag color='success' bordered={false} className='success-tag'>是</Tag>}
//                 </div>
//             )
//         },




//         {
//             title: '操作',
//             dataIndex: '',
//             key: '',
//             width: 150,
//             fixed: 'right',
//             render: (text, hang) => <div className='primary-cell btn'>收货详情</div>
//         },

//     ];


//     //供应商数据
//     const columns_supplier = [
//         {
//             title: '序号',
//             dataIndex: 'Index',
//             key: 'Index'

//         },
//         {
//             title: '供应商',
//             dataIndex: 'name',
//             key: 'name',
//             render: (text) => <Tag color='blue' bordered={false} className='primary-tag'>{text}</Tag>

//         },
//         {
//             title: '订单数',
//             dataIndex: 'order',
//             key: 'order',
//             render: (text) => <Tag color='blue' bordered={false} className='primary-tag'>{text}</Tag>
//         },

//         {
//             title: '销售额',
//             dataIndex: 'money',
//             key: 'money',
//             ellipsis: {
//                 showTitle: false,
//             },
//             width: 100,
//             render: (text) => <Tooltip placement="topLeft" title={text}>
//                 <Tag color='blue' bordered={false} className='primary-tag'>{text}</Tag>
//             </Tooltip>
//         },
//         {
//             title: '种类',
//             dataIndex: 'category',
//             key: 'category',
//             render: (text) => <Tag color='blue' bordered={false} className='primary-tag'>{text}</Tag>
//         },
//         {
//             title: '销量',
//             dataIndex: 'sales',
//             key: 'sales',
//             render: (text) => <Tag color='blue' bordered={false} className='primary-tag'>{text}</Tag>
//         },
//         {
//             title: '最新下单时间',
//             dataIndex: 'lastTime',
//             key: 'lastTime',
//             ellipsis: {
//                 showTitle: false,
//             },
//             render: (text) => <Tooltip placement="topLeft" title={text}>
//                 {text}
//             </Tooltip>,
//             width: 100
//         },
//         {
//             title: '操作',
//             dataIndex: '',
//             key: '',
//             width: 185,
//             fixed: "right",
//             render: (text, hang) => (
//                 <div style={{ width: 185 }}>
//                     <div style={{ marginLeft: "5px" }} className="primary btn" size="small" onClick={() => { supplierDetail(hang.id) }}>详情</div>
//                 </div>
//             )
//         },

//     ];

//     //供应商数据 详情
//     const columns_supplierSon = [
//         {
//             title: '序号',
//             dataIndex: 'Index',
//             key: 'Index',
//             width: 50,
//         },
//         {
//             title: '详情号',
//             dataIndex: 'id',
//             key: 'id',
//             ellipsis: {
//                 showTitle: false,
//             },
//             with: 80,
//             render: (text) => (<Tooltip placement="topLeft" title={text}>{text}</Tooltip>),

//         },
//         {
//             title: '供应商',
//             dataIndex: 'supplier',
//             key: 'supplier',
//             width: 120,
//             ellipsis: {
//                 showTitle: false,
//             },
//             render: (text) => <Tooltip placement="topLeft" title={text}><Tag color='blue' bordered={false} className='primary-tag'>{text}</Tag></Tooltip>

//         },
//         {
//             title: '商户',
//             dataIndex: 'merchant',
//             key: 'merchant',
//             // with:50,
//             ellipsis: {
//                 showTitle: false,
//             },
//             render: (text) => <Tooltip placement="topLeft" title={text}>{text}</Tooltip>

//         },

//         {
//             title: '商品',
//             dataIndex: 'name',
//             key: 'name',
//             ellipsis: {
//                 showTitle: false,
//             },
//             width: 100,
//             render: (text) => <Tooltip placement="topLeft" title={text}>{text}</Tooltip>
//         },
//         {
//             title: '数量',
//             dataIndex: 'number',
//             key: 'number',
//             width: 40,
//         },
//         {
//             title: '单价',
//             dataIndex: 'price',
//             key: 'price',
//             ellipsis: {
//                 showTitle: false,
//             },
//             width: 90,
//             render: (text) => <Tooltip placement="topLeft" title={text}>
//                 <Tag color='red' bordered={false} className='danger-tag'>￥ {text}</Tag>
//             </Tooltip>
//         },
//         {
//             title: '总价',
//             dataIndex: 'money',
//             key: 'money',
//             ellipsis: {
//                 showTitle: false,
//             },
//             width: 90,
//             render: (text) => <Tooltip placement="topLeft" title={text}>
//                 <Tag color='red' bordered={false} className='danger-tag'>￥ {text}</Tag>
//             </Tooltip>
//         },
//         {
//             title: '时间',
//             dataIndex: 'time',
//             key: 'time',
//             // with:50,
//             ellipsis: {
//                 showTitle: false,
//             },
//             render: (text) => <Tooltip placement="topLeft" title={text}>{text}</Tooltip>
//         },
//         {
//             title: '发货',
//             dataIndex: 'isSend',
//             key: 'isSend',
//             render: (text) => (
//                 <div>
//                     {text == 0 && <Tag color='warning' bordered={false} className='warning-tag'>否</Tag>}
//                     {text == 1 && <Tag color='success' bordered={false} className='success-tag'>是</Tag>}
//                 </div>
//             )
//         },
//         {
//             title: '收货',
//             dataIndex: 'isReceive',
//             key: 'isReceive',
//             width: 60,
//             render: (text) => (
//                 <div>
//                     {text === 0 && <Tag color='warning' bordered={false} className='warning-tag'>否</Tag>}
//                     {text === 1 && <Tag color='success' bordered={false} className='success-tag'>是</Tag>}
//                 </div>
//             )
//         },
//         {
//             title: '收货数量',
//             dataIndex: 'receiveNumber',
//             key: 'receiveNumber',
//             render: (text) => <Tag color='blue' bordered={false} className='primary-tag'>{text}</Tag>
//         },
//         {
//             title: '收货金额',
//             dataIndex: 'receiveMoney',
//             key: 'receiveMoney',
//             ellipsis: {
//                 showTitle: false,
//             },
//             //   with:100,
//             render: (text) => <Tooltip placement="topLeft" title={text}><Tag color='red' bordered={false} className='danger-tag'>￥ {text}</Tag></Tooltip>

//         },
//         {
//             title: '完成',
//             dataIndex: 'isComplete',
//             key: 'isComplete',
//             width: 60,
//             render: (text) => (
//                 <div>
//                     {text === 0 && <Tag color='warning' bordered={false} className='warning-tag'>否</Tag>}
//                     {text === 1 && <Tag color='success' bordered={false} className='success-tag'>是</Tag>}
//                 </div>
//             )
//         },
//         {
//             title: '操作',
//             dataIndex: '',
//             key: '',
//             width: 185,
//             fixed: "right",
//             render: (text, hang) => (
//                 <div style={{ width: 185 }}>
//                     <div style={{ marginLeft: "5px" }} className="primary-cell btn" size="small" onClick={() => { supplierDetail(hang.id) }}>详情1111</div>
//                 </div>
//             )
//         },

//     ];


//     //获取销售数据的单个详情
//     const getOrderDetails = async (props) => {
//         const res = await GetOrderDetails({ id: props });
//         if (res.result !== 0) {
//             message.error("数据有误");
//         }
//         res.data.map((d, i) => { return d.Index = i + 1 });
//         setOrderSonTable(res.data);
//         setLoad((load) => ({ ...load, sonFirst: false }));
//     }

//     //获取热销商品的单个详情
//     const getGoodsOrderDetails = async (props) => {
//         const res = await GetGoodsOrderDetails({
//             id: props,
//             begin: likeSelect.begin,
//             end: likeSelect.end,
//             page: goodDetailPages.page,
//             limit: goodDetailPages.limit
//         });
//         console.log(res, "flsdlmkgfsgjmsjgwe");
//         if (res?.result !== 0) {
//             message.error("数据有误");
//         }
//         res?.data.data.map((d, i) => { return d.Index = i + 1 });
//         sethootGoodSonTable(res?.data.data);
//         setLoad((load) => ({ ...load, sonFirst: false }));
//     }


//     //获取供应商的单个详情
//     const getSupplierDetails = async (props) => {
//         const res = await GetSupplierOrderDetails({
//             id: props,
//             begin: likeSelect.begin,
//             end: likeSelect.end,
//             page: supplierDetailPages.page,
//             limit: supplierDetailPages.limit
//         });

//         if (res?.result !== 0) {
//             message.error("数据有误");
//         }
//         res?.data.data.map((d, i) => { return d.Index = i + 1 });
//         setSupplierSonTable(res?.data.data);
//         setLoad((load) => ({ ...load, sonFirst: false }));
//     }



//     //销售数据分页方法
//     const ordersPageChange = () => {

//     }

//     //畅销商品分页方法
//     const goodsPageChange = () => {

//     }

//     //销售数据详情按钮
//     const ordersDetail = (props) => {
//         setLoad((load) => ({ ...load, sonFirst: true }));
//         setOpen_a(true);
//         getOrderDetails(props);

//     }
//     //热销商品详情按钮
//     const hootGoodDetail = (props) => {
//         setLoad((load) => ({ ...load, sonFirst: true }));
//         setOpen_b(true);
//         getGoodsOrderDetails(props);
//     }
//     //供应商详情按钮
//     const supplierDetail = (props) => {
//         setLoad((load) => ({ ...load, sonFirst: true }));
//         setOpen_c(true);
//         getSupplierDetails(props);
//     }







//     // 标记一下   card响应改变
//     useEffect(() => {
//         const widthSize = () => {
//             setWindowWidth(getWidth());
//         };
//         window.addEventListener("resize", widthSize);
//         if (windowWidth.width <= 1280) {
//             setCard(12);
//         }

//         if (windowWidth.width <= 1000) {
//             setCard(24);
//         }

//         if (windowWidth.width > 1000) {
//             setCard(12);
//         }
//         if (windowWidth.width > 1280) {
//             setCard(6);
//         }

//         return () => {
//             window.removeEventListener("resize", widthSize);
//         };
//     });
//     const gridStyle = {
//         textAlign: 'center',
//         fontSize: "18px",
//         paddingLeft: "20px",
//         paddingRight: "20px",
//         boxSizing: "border-box"
//     };
//     //表格数据加载
//     useEffect(() => {
//         const getData = () => {
//            setLoad((load)=>({...load,loading:true}));
//             Promise.allSettled([
//                 GetStatistics(),
//                 GetOrders({ page: orderPages.page, limit: orderPages.limit, begin: likeSelect.begin, end: likeSelect.end }),
//                 GetHotGoods({ page: hootGoodPages.page, limit: hootGoodPages.limit, begin: likeSelect.begin, end: likeSelect.end }),
//                 GetSupplierSales({ page: supplierPages.page, limit: supplierPages.limit, begin: likeSelect.begin, end: likeSelect.end })
//             ]).then((res) => {
//                 setLoad((load)=>({...load,loading:false}));
//                 const result = res.some((d) => d.value?.result === 0);
//                 if (!result) {
//                     message.error("数据有误");
//                 }
//                 setCardData(res[0].value?.data);  //卡片数据

//                 setOrdersTable(res[1].value?.data); //销售数据

//                 res[2].value?.data.data.map((d, i) => { return d.Index = i + 1 });
//                 setHootGoodTable(res[2].value?.data); //热销商品数据

//                 res[3].value?.data.data.map((d, i) => { return d.Index = i + 1 });
//                 setSupplierTable(res[3].value?.data); //供应商数据

//                 setOrderPage((orderPages) => ({ ...orderPages, total: res[1].value?.data.total })); //销售分页
//                 setHootGoodPage((hootGoodPages) => ({ ...hootGoodPages, total: res[2].value?.data.total }));  //热销商品数据分页
//                 setSupplierPage((supplierPages) => ({ ...supplierPages, total: res[3].value?.data.total }));  //供应商数据分页
//                 setLoad((load) => ({ ...load, isFirst: false }));
//             });
//         }
//         getData();
//     }, [likeSelect.begin,likeSelect.end])

//     return (
//         <div className="Containers homeIndex" style={{ padding: 0 }}>
//             <Skeleton active loading={load.isFirst} paragraph={{ rows: 15 }}>
//                 <div className='pdw'>
//                     <Row gutter={[10, 2]}>
//                         <Col className="gutter-row" span={cardWidth}>
//                             <div>

//                                 <Card title={<div>订单总数，
//                                     <CountUp start={0} end={cardData.orderCount} duration="1.5" />

//                             </div>} className="order-card-a" style={gridStyle} bordered={false}>
//                                     有效金额，
//                                     <CountUp start={0} end={cardData.orderMoney} duration="1.5" />

//                                     {/* {cardData.orderMoney} */}
//                                 </Card>
//                             </div>
//                         </Col>
//                         <Col className="gutter-row" span={cardWidth} >
//                             <div>
//                                 <Card title={<div>发货量，
//                                     {/* {cardData.sendCount} */}
//                                     <CountUp start={0} end={cardData.sendCount} duration="1.5" />
//                                     </div>} className="order-card-b" style={gridStyle} bordered={false} >
//                                     收货量， <CountUp start={0} end={cardData.receiveCount} duration="1.5" />
//                                     {/* {cardData.receiveCount} */}
//                                 </Card>
//                             </div>
//                         </Col>
//                         <Col className="gutter-row" span={cardWidth}>
//                             <div>
//                                 <Card title={<div>供应商，
//                                     {/* {cardData.supplierCount} */}
//                                     <CountUp start={0} end={cardData.supplierCount} duration="1.5" />
//                                     </div>} className="order-card-c" style={gridStyle} bordered={false}>
//                                     商户，<CountUp start={0} end={cardData.merchantCount} duration="1.5" />
//                                     {/* {cardData.merchantCount} */}
//                                 </Card>
//                             </div>
//                         </Col>
//                         <Col className="gutter-row" span={cardWidth}>
//                             <div>
//                                 <Card title={<div>商品种类，
//                                     <CountUp start={0} end={cardData.goodsCategory} duration="1.5" />
//                                     {/* {cardData.goodsCategory} */}
//                                     </div>} className="order-card-d" style={gridStyle} bordered={false}>
//                                     商品销量，<CountUp start={0} end={cardData.goodsSales} duration="1.5" />
//                                     {/* {cardData.goodsSales} */}
//                                 </Card>
//                             </div>
//                         </Col>

//                     </Row>

//                     <div className="home_bd">
//                     </div>

//                 </div>


//                 <div className='data_title'>
//                     <div className='data_title_left'>
//                         <div className='data_title_name data_title_bg_a'>
//                             销售数据
//                         </div>
//                     </div>

//                     <div className='data_title_right'>
//                         <div style={{ float: 'right' }}>
//                             <Checkbox.Group options={options} defaultValue={[]} onChange={onChange} />

//                         </div>
//                     </div>

//                 </div>


//                 <div>
//                     <div className="good-data pdw">

//                         <Table dataSource={ordersTable.data} columns={columns_orders} bordered pagination={false} loading={load.loading}
//                             style={{ marginTop: "5px" }}
//                         />
//                         <Modal
//                             title="详情"
//                             okButtonProps={false}
//                             open={open_a}
//                             onOk={() => setOpen_a(false)}
//                             onCancel={() => setOpen_a(false)}
//                             width={1200}
//                             footer={null}
//                         >
//                             <Skeleton active loading={load.sonFirst} paragraph={{ rows: 5 }}>
//                                 <Table dataSource={orderSonTable} columns={columns_orderSon} bordered pagination={false} loading={load.sonLoading}
//                                     style={{ marginTop: "5px" }}
//                                     scroll={{
//                                         y: 500
//                                     }}
//                                 />
//                             </Skeleton>



//                         </Modal>
//                         <div className="page-layout">
//                             <Pagination defaultCurrent={1} total={orderPages.total} onChange={(value) => { ordersPageChange(value) }} />
//                         </div>
//                     </div>
//                 </div>




//                 <div className='data_title'>
//                     <div className='data_title_left'>
//                         <div className='data_title_name data_title_bg_b'>
//                             畅销商品
//                         </div>
//                     </div>

//                     <div className='data_title_right'>

//                     </div>

//                 </div>

//                 <div>
//                     <div className="good-data pdw">

//                         <Table dataSource={hootGoodTable.data} columns={columns_hootGoods} bordered pagination={false} loading={load.loading}
//                             style={{ marginTop: "5px" }}
//                         />

//                         <div className="page-layout">
//                             <Pagination defaultCurrent={1} total={hootGoodPages.total} onChange={(value) => { goodsPageChange(value) }} />
//                         </div>




//                         <Modal
//                             title="详情"
//                             okButtonProps={false}
//                             open={open_b}
//                             onOk={() => setOpen_b(false)}
//                             onCancel={() => setOpen_b(false)}
//                             width={1200}
//                             footer={null}
//                         >
//                             <Skeleton active loading={load.sonFirst} paragraph={{ rows: 5 }}>
//                                 <Table dataSource={hootGoodSonTable} columns={columns_goodSon} bordered pagination={false} loading={load.sonLoading}
//                                     style={{ marginTop: "5px" }}
//                                     scroll={{
//                                         y: 500,
//                                         x: 1240
//                                     }}
//                                 />
//                             </Skeleton>
//                             <div className="page-layout">
//                                 <Pagination defaultCurrent={1} total={hootGoodPages.total} onChange={(value) => { goodsPageChange(value) }} />
//                             </div>
//                         </Modal>




//                     </div>
//                 </div>


//                 <div className='data_title'>
//                     <div className='data_title_left'>
//                         <div className='data_title_name data_title_bg_c'>
//                             供应商数据
//                         </div>
//                     </div>

//                     <div className='data_title_right'>

//                     </div>

//                 </div>

//                 <div>
//                     <div className="good-data pdw">

//                         <Table dataSource={supplierTable.data} columns={columns_supplier} bordered pagination={false} loading={load.loading}
//                             style={{ marginTop: "5px" }}

//                         />

//                         <div className="page-layout">
//                             <Pagination defaultCurrent={1} total={supplierPages.total} onChange={(value) => { goodsPageChange(value) }} />
//                         </div>



//                         <Modal
//                             title="详情11111"
//                             okButtonProps={false}
//                             open={open_c}
//                             onOk={() => setOpen_c(false)}
//                             onCancel={() => setOpen_c(false)}
//                             width={1200}
//                             footer={null}
//                         >
//                             <Skeleton active loading={load.sonFirst} paragraph={{ rows: 5 }}>
//                                 <Table dataSource={supplierSonTable} columns={columns_supplierSon} bordered pagination={false} loading={load.sonLoading}
//                                     style={{ marginTop: "5px" }}
//                                     scroll={{
//                                         y: 500,
//                                         x: 1240
//                                     }}
//                                 />
//                             </Skeleton>
//                             <div className="page-layout">
//                                 <Pagination defaultCurrent={1} total={hootGoodPages.total} onChange={(value) => { goodsPageChange(value) }} />
//                             </div>
//                         </Modal>





//                     </div>
//                 </div>


//             </Skeleton>







//         </div>
//     )


// }


const HomeIndex = () => {
    //标题/导航使用
    document.info = [
        {
            title: "首页",
            url: "/",
        }
    ]

    const [load, setLoad] = useState({ 
        loading: false, 
        isFirst:true  
     })
    //点选按钮选中的值
    const [value, setValue] = useState(1);

    //点选按钮选项
    const [options, setOptions] = useState([
        {
            label: '今日',
            value: 1,
            
        },
        {
            label: '7日内',
            value: 7,
         
        },
        {
            label: '30日内',
            value: 30,
           
        },
        {
            label: '6个月内',
            value: 180,
          
        },
        {
            label: '1年内',
            value: 365,
           
        },
        {
            label: '不限制',
            value: -1,
        }
    ])

    const [cardWidth, setCard] = useState(6); //卡片大小弹性设置
    const [cardData, setCardData] = useState([]);//卡片数据设置
    const [windowWidth, setWindowWidth] = useState(getWidth());   //实时获取页面宽度
    const gridStyle = {
        // textAlign: 'center',
        foneweight: "500",
        fontSize: "24px",
        paddingLeft: "20px",
        paddingRight: "20px",
        boxSizing: "border-box",
        backgroundColor:"#f8f8f8",
        
    };






    const methods = {

        initCharta:(a,b,c) => {
            var myChart = echarts.init(document.getElementById("a_one"));
            var option;
            //销售金额
             const moneyValues1=b;
            //data 成交金额
            const  moneyValues2= c;
            //日期
             const columns=a;
             console.log(myChart.columns,"lknjfsdjgbjsdnfksdmf");
            
            option = {
              title: {
                text: `${value===1?'今日':value==-1?'总':value+'日'}-销售数据`,
                left:30,
                textStyle: {
                  color: "#000",
                  fontSize: 20,
                },
              },
              tooltip: {
                trigger: "axis",
              },
              legend: {
                data:columns,
                data: ["销售金额", "成交金额"],
                left: "50%",
              },
              
              toolbox: {
                feature: {
                  saveAsImage: {}
                }
              },
              xAxis: {
                type: "category",
                boundaryGap: false,
                 data:columns,
                name: "日期",
              },
        
              yAxis: {
                type: "value",
                name: '金额(元)',
                // 设置小标题
                nameGap: 15, // 与坐标轴之间的距离
                nameTextStyle: {
                  fontSize: 12,
                 marginTop:10
                }
              },
              series: [
                {
                  name: "销售金额",
                  type: "line",
                  stack: "Total",
                  label: {
                    show: true,
                    position: "top",
                  },
                  data: moneyValues1,
                },
                {
                  name: "成交金额",
                  type: "line",
                  stack: "Total",
                  label: {
                    show: true,
                    position: "top",
                  },
                  data: moneyValues2,
                },
              ],
            };
            option && myChart.setOption(option);
          },
        
          initChartb:(a,b,c) => {
            var myChart = echarts.init(document.getElementById("b_one"));
            var option;
            //销售金额
             const orderValues1=b;
            //data 成交金额
            const  orderValues2= c;
            //日期
             const columns=a;
            
            
            option = {
              title: {
                text:  `${value===1?'今日':value==-1?'总':value+'日'}-订单数据`,
                left:30,
                textStyle: {
                  color: "#000",
                  fontSize: 20,
                },
              },
              tooltip: {
                trigger: "axis",
              },
              legend: {
                data:columns,
                data: ["订单总数", "完成数量"],
                left: "50%",
              },
              
              toolbox: {
                feature: {
                  saveAsImage: {}
                }
              },
              xAxis: {
                type: "category",
                boundaryGap: false,
                 data:columns,
                name: "日期",
              },
        
              yAxis: {
                type: "value",
                name: '数量(单)',
                // 设置小标题
                nameGap: 15, // 与坐标轴之间的距离
                nameTextStyle: {
                  fontSize: 12,
                 marginTop:10
                }
              },
              series: [
                {
                  name: "订单总数",
                  type: "line",
                  stack: "Total",
                  label: {
                    show: true,
                    position: "top",
                  },
                  data: orderValues1,
                },
                {
                  name: "完成数量",
                  type: "line",
                  stack: "Total",
                  label: {
                    show: true,
                    position: "top",
                  },
                  data: orderValues2,
                },
              ],
            };
            option && myChart.setOption(option);
          },
        //获取统计数据
        getStatistics: async () => {
            const res = await GetStatistics({day:value});
            if(res?.result===0){
                setCardData(res.data);
                methods.initCharta(res.data.dates,res.data.moneyValues1,res.data.moneyValues2);
                methods.initChartb(res.data.dates,res.data.orderValues1,res.data.orderValues2);
                setLoad((load)=>({...load,loading:false}));
            }
           
            return true
        },
        //单选按钮改变事件
        onChange: (e) => {
            setLoad((load)=>({...load,loading:true}));
            setValue(e.target.value);
        }
    }
    useEffect(() => {
       methods.getStatistics();
   
    },[value])

    // 标记一下   card响应改变
    useEffect(() => {
        const widthSize = () => {
            setWindowWidth(getWidth());
        };
        window.addEventListener("resize", widthSize);
        if (windowWidth.width <= 1280) {
            setCard(12);
        }

        if (windowWidth.width <= 1000) {
            setCard(24);
        }

        if (windowWidth.width > 1000) {
            setCard(12);
        }
        if (windowWidth.width > 1280) {
            setCard(6);
        }

        return () => {
            window.removeEventListener("resize", widthSize);
        };
    });



    return (
        <div className='Containers homeIndex' style={{ padding: 10 }}>
             <Spin
             tip="请稍后..."
             spinning={load.loading}  
    indicator={
      <LoadingOutlined
        style={{
          fontSize: 34,
        }}
        spin
      />
    }
  >


            {/* 选择数据天数 */}
            <div style={{ minHeight: 55, lineHeight: '55px', borderBottom: '1px solid #f0f0f0' }}>
                <Radio.Group onChange={methods.onChange} value={value} style={{
                    width: '100%',
                }}>
                    <Row>
                        {
                            options.map((item, index) => {
                                return (
                                    <Col className='gutter-rows' key={index}>
                                        <Radio value={item.value} key={index}>{item.label}</Radio></Col>
                                )
                            })
                        }
                    </Row>
                </Radio.Group>
            </div>
  {/* 选择数据天数 */}



               {/* 数据卡片 */}
            <div style={{marginTop:20}}>
                <Row gutter={[10, 10]} className=''>
                    <Col className="gutter-row" span={cardWidth}>
                        <div>

                            <Card  hoverable title={<div style={{color:'gray',fontSize:'18px'}}>{value===1?'今天':value==-1?'总':value+'天'}-销售金额
                                {/* <CountUp start={0} end={cardData.orderCount} duration="1.5" /> */}

                            </div>} className="" style={gridStyle} bordered={false}>
                              
                                <div className='myflex'>
                                <div>
                                <i className='iconfont icon-consumption'></i><CountUp start={0} end={Math.round(cardData.money)} duration="2" style={{fontSize:'28px',fontWeight:500}} />
                                </div>
                                 <div>
                                 
                               
                                 <Tooltip title={value===1?'昨日销售金额:'+cardData.oldMoney:'前一个7日销售金额:'+cardData.oldMoney}>
                                 <span style={{fontSize:'16px'}}>{cardData.moneyPercent}%</span>
                                 </Tooltip>
                                 </div>
                                </div>
                            </Card>
                        </div>
                    </Col>

                    <Col className="gutter-row" span={cardWidth}>
                        <div>

                            <Card  hoverable title={<div style={{color:'gray',fontSize:'18px'}}>{value===1?'今天':value==-1?'总':value+'天'}-成交金额
                                {/* <CountUp start={0} end={cardData.orderCount} duration="1.5" /> */}

                            </div>} className="" style={gridStyle} bordered={false}>
                              
                                <div className='myflex'>
                               <div>
                               <i className='iconfont icon-jinrichengjiaoe'></i>
                               <CountUp start={0} end={Math.round(cardData.currMoney)} duration="2" style={{fontSize:'28px',fontWeight:500}} />
                               </div>
                                 <div>
                                 <Tooltip title={value===1?'昨日成交金额:'+cardData.oldCurrMoney:'前一个7日成交金额:'+cardData.oldCurrMoney}>
                                 <span style={{fontSize:'16px'}}>{cardData.currMoneyPercent}%</span>
                                 </Tooltip>
                                 </div>
                                </div>
                            </Card>
                        </div>
                    </Col>

                    <Col className="gutter-row" span={cardWidth}>
                        <div>

                            <Card  hoverable title={<div style={{color:'gray',fontSize:'18px'}}>{value===1?'今天':value==-1?'总':value+'天'}-订单数量
                                {/* <CountUp start={0} end={cardData.orderCount} duration="1.5" /> */}

                            </div>} className="" style={gridStyle} bordered={false}>
                              
                                <div className='myflex'>
                                <div>
                                <i className='iconfont icon-shouye1'></i><CountUp start={0} end={Math.round(cardData.orderCount)} duration="2" style={{fontSize:'28px',fontWeight:500}} />
                                </div>
                                 <div>
                                 <Tooltip title={value===1?'昨日订单数:'+cardData.oldOrderCount:'前一个7日订单数:'+cardData.oldOrderCount}>
                                 <span style={{fontSize:'16px'}}>{cardData.orderPercent}%</span>
                                 </Tooltip>
                                 </div>
                                </div>
                            </Card>
                        </div>
                    </Col>


                    <Col className="gutter-row" span={cardWidth}>
                        <div>

                            <Card  hoverable title={<div style={{color:'gray',fontSize:'18px'}}>{value===1?'今天':value==-1?'总':value+'天'}-完成订单
                                {/* <CountUp start={0} end={cardData.orderCount} duration="1.5" /> */}

                            </div>} className="" style={gridStyle} bordered={false}>
                              
                                <div className='myflex'>
                               <div>
                                <i className='iconfont icon-shouye3'></i><CountUp start={0} end={Math.round(cardData.orderCompleteCount)} duration="2" style={{fontSize:'28px',fontWeight:500}} />
                               </div>
                                 <div>
                                 <Tooltip title={value===1?'昨日订单完成数:'+cardData.oldOrderCompleteCount:'前一个7日订单完成数:'+cardData.oldOrderCompleteCount}>
                                 <span style={{fontSize:'16px'}}>{cardData.completeOrderPercent}%</span>
                                 </Tooltip>
                                 </div>
                                </div>
                            </Card>
                        </div>
                    </Col>

    

                </Row>
            </div>
              {/* 数据卡片 */}


             <div className="home_bd"></div>
        

             {/* 图标 */}
            <div>

             {/* 图标1 */}
            <div id="a_one"style={{marginTop:15}}></div>
             
             {/* 图标2 */}
            <div id="b_one"style={{marginTop:15}}></div>

            </div>
             {/* 图表 */}


</Spin>

        </div>
    )
}

export default HomeIndex